<template>
  <div class="official-attire-container">
    <h2 class="title">宋朝官服</h2>
    <p class="intro">
      宋朝官服是中国古代朝廷官员的制服，反映了当时的社会阶层、官员职务及礼仪文化。官服的造型、色彩和装饰品的设计，体现了宋代的繁荣与审美。
    </p>

    <!-- 官服详细介绍 -->
    <div class="attire-details" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
      <transition name="fade" mode="out-in">
        <div v-if="showDetails" class="details">
          <h3 style="text-align: center;margin-bottom: 10px;">官服的特点</h3>
          <p style="text-indent: 2em;">宋朝官服的颜色、纹饰和款式都有严格的规定。官服分为文官服和武官服，文官的服饰通常以黑、紫为主，武官则以红、金为主。不同级别的官员穿着不同等级的服饰，<br>颜色和装饰象征着他们的职务。
            宋朝官服的设计和制度反映了当时社会的等级制度和文化价值观，同时也展现了宋朝服饰艺术的高度发展。</p>
          <p style="text-indent: 2em; margin-bottom: 10px;">官服的帽子是标志身份的重要部分，特别是“冕服”和“朝服”，它们由不同的帽饰和披肩组成，显得庄重而威严。</p>
        </div>
      </transition>
      <transition name="slide-fade">
        <div v-if="showDetails" class="image-container">
          <img :src="attireImage" alt="宋朝官服" class="fade-in"/>
        </div>
      </transition>
    </div>

    <!-- 更多信息按钮 -->
    <button @click="toggleDetails" class="info-toggle-btn">了解更多</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  // 响应式数据
  const attireImage = ref('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2023%2F06%2F2316%2F268111703_7_20230623043330619.jpeg&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1733974450&t=5d89e91cb185a9792f4fb0a073a730bb'); // 替换为真实图片链接
  const showDetails = ref(false); // 控制是否显示详细介绍

  // 切换详细介绍显示状态
  const toggleDetails = () => {
    showDetails.value = !showDetails.value;
  };

  // 鼠标事件：进入与离开
  const onMouseEnter = () => {
    console.log('鼠标进入官服介绍区域');
  };

  const onMouseLeave = () => {
    console.log('鼠标离开官服介绍区域');
  };
</script>

<style scoped>
/* 整体容器样式 */
.official-attire-container {
  padding: 20px;
  text-align: center;
  background-color: #f4f4f9;
  font-family: 'Arial', sans-serif;
}

/* 标题样式 */
.title {
  margin-left: 45%;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 简介部分样式 */
.intro {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.6;
  transition: all 0.3s ease;
}

/* 详细介绍样式 */
.attire-details {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.details {
  text-align: left;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: opacity 0.5s ease;
}

.details h3 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.details p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.image-container {
  margin-top: 20px;
}

.image-container img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease;
}

.image-container img:hover {
  transform: scale(1.05);
}

/* 按钮样式 */
.info-toggle-btn {
  padding: 10px 20px;
  background-color: #0044cc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s;
}

.info-toggle-btn:hover {
  background-color: #0033aa;
}

/* 动画效果：渐变与滑动 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>